<template>
  <ContentWrap>
    <el-card class="box-card !border-none" shadow="never">
      <el-form ref="searchFormRef" :model="tableData.searchParam" inline>
        <el-form-item label="类型">
          <el-select v-model="tableData.searchParam.type" placeholder="全部" clearable>
            <el-option label="普通用户" :value="0" />
            <el-option label="会员" :value="1" />
            <el-option label="招商人员" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="tableData.searchParam.mobile" placeholder="请输入手机号码" clearabl />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="tableData.searchParam.nickname" placeholder="请输入昵称" clearabl />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="tableData.searchParam.createTime"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon class="mr-5px" icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon class="mr-5px" icon="ep:refresh" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <div class="mt-[5px]">
        <el-table :data="tableData.list" size="large" v-loading="tableData.loading">
          <el-table-column label="用户信息" min-width="180" align="center">
            <template #default="{ row }">
              <div class="flex flex-col items-center justify-center">
                <img
                  class="w-[50px] h-[50px] mr-[10px] border border-solid border-gray-50"
                  :src="row.user.avatar || '/avatar.png'"
                  alt=""
                />
                <span>{{ row.user.nickname || '匿名' }}</span>
                <span>{{ row.user.mobile || '未绑定手机号' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="推广码" align="center" width="80px">
            <template #default="scope">
              <el-image
                fit="cover"
                title="[推广码]"
                :src="scope.row.qrcode || '/placeholder.png'"
                :preview-src-list="[scope.row.qrcode || '/placeholder.png']"
                :initial-index="0"
                :preview-teleported="true"
                :hide-on-click-modal="true"
                class="flex-none w-50px h-50px ml-5px cursor-pointer"
              />
            </template>
          </el-table-column>
          <el-table-column label="等级资格" min-width="160" align="left">
            <template #default="{ row }">
              <p>身份等级：{{ row.levelWeightName }}</p>
              <p>
                分佣资格：<span :class="row.enabled ? 'text-green-500' : 'text-red-500'">{{
                  row.enabled ? '有' : '无'
                }}</span>
                <Icon
                  icon="ep:edit-pen"
                  @click="handleEnabled(row)"
                  class="cursor-pointer text-blue-500 -bottom-[4px] -right-[4px]"
                />
              </p>
            </template>
          </el-table-column>
          <el-table-column label="邀请人数" min-width="100">
            <template #default="{ row }">
              <p class="flex flex-row items-center">
                <span>{{ row.inviteCount }}人</span>
                <Icon
                  icon="ep:info-filled"
                  @click="handleInviteUsers(row)"
                  class="cursor-pointer text-blue-500 -right-[4px]"
                />
              </p>
            </template>
          </el-table-column>
          <el-table-column label="分佣信息" min-width="180">
            <template #default="{ row }">
              <p class="flex flex-row items-center">
                <span>累计业绩： </span
                ><span class="text-orange-500">{{ fenToYuan(row.achievementPrice) }}</span> 元
                <Icon
                  icon="ep:info-filled"
                  @click="handleInviteOrders(row)"
                  class="cursor-pointer text-blue-500 -right-[4px]"
                />
              </p>
              <p
                >累计贡值：<span class="text-pink-500">{{ row.bonusGrowth }}</span> 个</p
              >
              <p
                >累计分佣：<span class="text-orange-500">{{ fenToYuan(row.bonusMoney) }}</span>
                元</p
              >
            </template>
          </el-table-column>
          <el-table-column label="上级信息" min-width="180" align="center">
            <template #default="{ row }">
              <div
                v-if="Number(row.fatherUserId) > 0"
                class="flex flex-col items-center justify-center"
              >
                <img
                  class="w-[50px] h-[50px] mr-[10px] border border-solid border-gray-50"
                  :src="row.fatherUser.avatar || '/avatar.png'"
                  alt=""
                />
                <span>{{ row.fatherUser.nickname || '匿名' }}</span>
                <span>{{ row.fatherUser.mobile || '未绑定手机号' }}</span>
              </div>
              <span v-else>无</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <Pagination
        v-model:limit="tableData.searchParam.pageSize"
        v-model:page="tableData.searchParam.pageNo"
        :total="tableData.total"
        @pagination="loadTableData"
      />

      <UserEnabledForm ref="userEnabledDialog" @complete="loadTableData()" />
      <InviteUsersFrom ref="inviteUsersDialog" />
      <InviteRecordsFrom ref="inviteRecordsDialog" />
    </el-card>
  </ContentWrap>
</template>

<script lang="ts" setup>
import { FormInstance } from 'element-plus'
import { getPage } from '@/api/brokerage/user'
import UserEnabledForm from './UserEnabledForm.vue'
import InviteUsersFrom from './InviteUsersFrom.vue'
import InviteRecordsFrom from './InviteRecordsFrom.vue'
import { fenToYuan } from '@/utils'

defineOptions({ name: 'BrokerageUser' })

const tableData = reactive({
  total: 0,
  loading: true,
  list: [],
  searchParam: {
    pageNo: 1,
    pageSize: 10,
    type: '',
    mobile: '',
    nickname: '',
    createTime: []
  }
})

const route = useRoute()
tableData.searchParam.type = route.query.type ? route.query.type + '' : ''

const loadTableData = () => {
  tableData.loading = true
  getPage(tableData.searchParam)
    .then((res: any) => {
      tableData.loading = false
      tableData.list = res.list
      tableData.total = res.total
    })
    .catch(() => {
      tableData.loading = false
    })
}

const searchFormRef = ref<FormInstance>()

/** 搜索按钮操作 */
const handleQuery = () => {
  tableData.searchParam.pageNo = 1
  loadTableData()
}

/** 重置按钮操作 */
const resetQuery = () => {
  searchFormRef.value?.resetFields()
  tableData.searchParam = {
    pageNo: 1,
    pageSize: 10,
    type: '',
    mobile: '',
    nickname: '',
    createTime: []
  }
  handleQuery()
}

/** 初始化 **/
onMounted(() => {
  handleQuery()
})

const inviteUsersDialog = ref<any>({})
const handleInviteUsers = (row: any) => {
  inviteUsersDialog.value.setInitData(row)
  inviteUsersDialog.value.showDialog = true
}

const inviteRecordsDialog = ref<any>({})
const handleInviteOrders = (row: any) => {
  inviteRecordsDialog.value.setInitData(row)
  inviteRecordsDialog.value.showDialog = true
}

const userEnabledDialog = ref<any>({})
const handleEnabled = (row: any) => {
  userEnabledDialog.value.setInitData(row)
  userEnabledDialog.value.showDialog = true
}
</script>
